import React, {Component} from 'react';
import {StyleSheet, Text, View, Image, ScrollView, Alert} from 'react-native';
import {Button, WhiteSpace, WingBlank, Flex, Toast, Modal} from '@ant-design/react-native';
import {getParkingOrderSingleInfo, ownerPayment, ownerPaymentBefore} from '~/api/parking';
import {getAppParameters} from '~/api/wechat';
var WeChat = require('react-native-wechat-lib');
export default class Pay extends Component {
    static navigationOptions = {
        title: '支付订单',
    };
    constructor(props) {
        //调用基类的所有的初始化方法
        super(props);

        // 设置当前组件的属性
        this.state = {
            orderid: this.props.navigation.getParam('orderid'),
            DepositPirce: this.props.navigation.getParam('DepositPirce'),
        };
        WeChat.registerApp('wxd487e39768c6f9ea', 'https://api.dev.lipopo.com.cn/')
            .then((state) => {
                if (state) {
                    console.log('WeChat API注册成功');
                } else {
                    console.log('WeChat API注册失败');
                }
            })
            .catch((e) => {
                console.log('WeChat API注册失败: ' + e);
            });
    }
    render() {
        const onpress = () => {
            //支付前的准备，如车位状态，当前订单状态
            let paydata = {order_id: this.state.orderid, payprice: this.state.DepositPirce};
            ownerPaymentBefore(paydata).then((paybefore) => {
                //支付前判断状态等
                if (paybefore.code === 0) {
                    WeChat.isWXAppInstalled().then((isInstalled) => {
                        //微信是否安装async
                        if (isInstalled) {
                            getAppParameters(paydata).then(async (par) => {
                                //生成统一下单，成功后打开微信支付
                                if (par.code === 0) {
                                    let params = JSON.parse(par.data);
                                    try {
                                        await WeChat.pay(params)
                                            .then((pay) => {
                                                //打开支付，判断是否支付成功await
                                                if (pay.errCode === 0) {
                                                    ownerPayment(paydata).then((busi) => {
                                                        //支付完成后，处理业务
                                                        if (busi.code === 0) {
                                                            this.props.navigation.replace('PaySuccess', {orderid: this.state.orderid});
                                                        } else {
                                                            console.log('收钱成功后，但业务回调失败');
                                                        }
                                                    });
                                                } else {
                                                    console.log('支付失败，异常');
                                                }
                                            })
                                            .catch((err) => {
                                                Modal.alert('提示', '支付失败，原因：' + err);
                                            });
                                    } catch (error) {
                                        Modal.alert('提示', '失效，支付异常!');
                                    }
                                } else {
                                    Modal.alert('提示', par.msg);
                                }
                            });
                        } else {
                            Modal.alert('提示', '没有安装微信软件，请您安装微信之后再试');
                        }
                    });
                } else {
                    Modal.alert('提示', paybefore.msg);
                }
            });
        };
        return (
            <View style={{width: '100%', height: '100%'}}>
                <View style={{width: '100%', height: '60%'}}>
                    <Flex style={{width: '100%', backgroundColor: 'white', padding: 15}}>
                        <Text>定金金额：￥{this.state.DepositPirce}元</Text>
                    </Flex>
                    <View>
                        <Text style={{padding: 10}}>选择支付方式</Text>
                    </View>
                    <Flex justify={'between'} style={{width: '100%', padding: 15, backgroundColor: 'white'}}>
                        <Flex>
                            <Image style={{width: 140, height: 38}} source={require('~/assets/pay/WePayLogo.png')} />
                            <Image style={{width: 50, height: 21}} source={require('~/assets/pay/tuijian.png')} />
                        </Flex>
                        <Image style={{width: 24, height: 24}} source={require('~/assets/pay/select.png')} />
                    </Flex>
                </View>

                <Flex justify={'center'} align={'end'} style={{width: '100%', height: '40%'}}>
                    <Flex
                        onPress={onpress}
                        style={{width: '96%', margin: '2%', borderRadius: 10, height: 49, backgroundColor: '#e84923'}}
                        justify={'center'}>
                        <Text style={{width: '100%', color: 'white', fontSize: 16, textAlign: 'center'}}>立即支付</Text>
                    </Flex>
                </Flex>
            </View>
        );
    }
}

const styles = StyleSheet.create({});
